<template>
  <div id="drawer-target">
    <n-card>
      <!-- 搜索 -->
      <HeadSearch
        :info="search"
        @search="handleSearch"
        @reset="handleSearch"
      />

      <!-- 表格 -->
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        :pagination-setting="pagination"
        :checked-row-keys="selectedIds"
        @update:checked-row-keys="selectedIds = $event"
      >
        <template
          v-if="permissionStore.includes('question:list:report')"
          #tableTitle
        >
          <n-button
            type="primary"
            class="btn"
            :disabled="noBtn"
            :loading="loading"
            @click="reportHandle"
          > 生成工单 </n-button>
        </template>
      </DataTable>
    </n-card>
  </div>

  <!-- 新增、编辑弹窗 -->
  <UserModal
    v-if="modalShow"
    v-model:visible="modalShow"
    :type="modalType"
    :data="rowData"
    @reload="handleSearch"
  />

  <!-- 详情 - 抽屉 -->
  <n-drawer
    v-model:show="showDraw"
    :width="'calc(100% - 2px)'"
    :placement="'right'"
    resizabl
    to="#drawer-target"
  >
    <n-drawer-content
      title="图片位置"
      closable
    >
      <draw-comp
        :detail="rowData"
        @close="showDraw = false;handleSearch()"
      />
    </n-drawer-content>
  </n-drawer>

</template>

<script>
import { ref, toRefs, reactive, unref, onUnmounted, watch } from 'vue'
import { useUserStore } from '@/store/modules/user'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import UserModal from './components/UserModal.vue'
import DrawComp from './components/DrawComp.vue'
import table from './tools/table'
import { search, getDeptInfo, getTypeList, getDeptId } from './tools/search'
import pagination from './tools/pagination'
import { getQuestionList, workOrder } from '@/api/question'
import { TASK_QUESTION_STATUS } from '@/utils/dictionary'
import { arrToObj } from '@/utils/handleData'
import { usePermissionStore } from '@/store/modules/permission'

export default {
  name: 'TaskAll',
  components: { HeadSearch, DataTable, UserModal, DrawComp },
  setup() {
    const permissionStore = usePermissionStore().accessPermissionCodes // 按钮权限
    const roleType = useUserStore().userInfo.type // 1：超级管理员， 2：管理员， 3：普通用户
    const roleDeptId = useUserStore().userInfo.deptId // 该角色的部门id
    getDeptInfo(roleDeptId)
    getTypeList()
    getDeptId(roleDeptId)

    const tableColumns = {}
    if (!permissionStore.includes('question:list:report')) {
      tableColumns.columns = table.columns.filter(item => item.type !== 'selection')
    }

    const data = reactive({
      ...toRefs(table),
      ...toRefs(search),
      ...tableColumns
    })

    // 请求接口
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        deptId: data.searchParams?.deptId ? data.searchParams.deptId : roleDeptId,
        ...res
      }

      const temp = await getQuestionList(_params)
      // 拼接经纬度
      temp.data.records = temp.data.records.map(it => ({
        ...it,
        lnglat: `${it.longitude}, ${it.latitude}`,
        statusName: arrToObj(TASK_QUESTION_STATUS, 'value', 'label')[it.status]
      }))
      return temp
    }

    const loading = ref(false)
    // 生成工单
    function reportHandle() {
      loading.value = true
      const idList = selectedIds.value.join(',')
      workOrder(idList).then(res => {
        if (res.code === 0) {
          selectedIds.value = []
          data.handleSearch()
        } else {
          $message.info(res.msg)
        }
        loading.value = false
      }).catch(e => {
        loading.value = false
      })
    }

    // 选择表格数据
    const selectedIds = ref([])
    function handleCheck(rowKeys) {
      selectedIds.value = rowKeys
    }

    onUnmounted(() => {
      data.searchParams = null
    })

    // 生成报告、确认、忽略 的按钮能否点击
    const noBtn = ref(true)
    watch(() => selectedIds.value, (val) => {
      noBtn.value = val.length === 0
    })

    return {
      ...toRefs(data),
      reportHandle,
      loadDataTable,
      pagination,
      roleType,
      handleCheck,
      noBtn,
      loading,
      permissionStore,
      selectedIds
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-target {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.btn {
  margin-right: 20px;
}
</style>
